<template>
    <div class="detail">
        <nav-bar>
            <div slot="left" class="back" @click="backClick">
                <img src="~assets/img/common/back.svg" alt="">
            </div>
            <div slot="center" class="title">
                <div class="title-item" 
                    :class="{active: index === currentIndex}"
                    @click="titleClick(index)"
                    v-for="(item, index) in titles" 
                    :key="index">{{item}}</div>
            </div>
        </nav-bar>
    </div>
</template>

<script>
    import NavBar from 'components/common/navbar/NavBar'
   
    export default {
        name: 'Detail',
        components: {
            NavBar
        },
        data() {
            return {
                titles: ['商品', '参数', '评论', '推荐'],
                currentIndex: 0
            }
        },
        created() {
            
        },
        methods: {
            titleClick(index) {
                this.currentIndex = index
            },
            backClick() {
                this.$router.back()
            }
        }
    }
</script>

<style scoped>
    .back img {
        margin-top: 11px;
    }

    .title {
        display: flex;
    }
    .title-item {
        flex: 1;
    }

    .active {
        color: var(--color-high-text);
    }
</style>